<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{common :: commomcss}"></head>
<body>
<!-- navbar-->
<div th:replace="~{common :: commonheader}"></div>
<div class="d-flex align-items-stretch">
  <div id="sidebar" class="sidebar py-3">
    <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">MAIN</div>
    <ul th:insert="~{common :: siderul}"></ul>
  </div>
  <div class="page-holder w-100 d-flex flex-wrap">
    <div class="container-fluid px-xl-5">

      <section class="py-5">
        <!--搜索框-->
        <form id="searchForm" class="ml-auto d-none d-lg-block" th:action="@{/admin/seachStudent}" method="post">
          <div class="form-group position-relative mb-0">
            <button type="submit" style="top: -3px; left: 0;" class="position-absolute bg-white border-0 p-0 btn btn-outline-primary"><i class="o-search-magnify-1 text-gray text-lg"></i></button>
            <input type="search" placeholder="请输入学生学号" class="form-control form-control-sm border-0 no-shadow pl-4" name="studentid">
          </div>
        </form>
        <div class="row">

          <div class="col-lg-12 mb-12">
            <div class="card">
              <h6>共有<td th:text="${studentPageInfo.getTotal()}"></td>位学生</h6>
              <div class="card-body">
                <table class="table table-striped table-hover card-text">
                  <thead>
                  <tr>
                    <th hidden="hidden">#</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>编辑</th>
                    <th>删除</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="student : ${studentPageInfo.getList()}">
                    <th scope="row" th:text="${student.getId()}" hidden="hidden"></th>
                    <td th:text="${student.getStudentid()}"></td>
                    <td th:text="${student.getUsername()}"></td>
                    <td th:text="${student.getTel()}"></td>
                    <td th:text="${student.getEmail()}"></td>
                    <td>
                      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#studentinfoedit" th:onclick="editstudentinfo([[${student}]]);">编辑</button>
                    </td>
                    <td>
                      <button type="button" class="btn btn-danger" th:onclick="delstudentinfo([[${student.id}]]);">删除</button>
                    </td>
                  </tr>

                  </tbody>
                </table>
                <!--弹出表单-->
                <!-- 模态框示例（Modal） -->
                <form method="post" th:action="@{/admin/updateStudentInfo}" class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
                  <div class="modal fade" id="studentinfoedit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                          </button>
                          <h4 class="modal-title" id="myModalLabel">学生信息</h4>
                        </div>
                        <div class="modal-body">
                          <form class="form-horizontal" role="form">

                            <!--表单中的项-->
                            <div class="form-group" hidden="hidden">
                              <label class="col-sm-3 control-label">学生表ID</label>
                              <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_id" name="id"/>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-3 control-label">学号</label>
                              <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_studentid" name="studentid"/>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-3 control-label">姓名</label>
                              <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_username" name="username"/>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-3 control-label">手机号</label>
                              <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_tel" name="tel"/>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-3 control-label">Email</label>
                              <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_email" name="email"/>
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                          </button>
                          <button type="submit" class="btn btn-primary">提交</button><span id="tip"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
                <!---->
              </div>
            </div>

            <!--分页-->
            <div class="row">
              <div class="col-lg-12" >
                <nav aria-label="..." style="margin: auto">
                  <ul class="pagination pagination-sm">
                    <a th:if="${studentPageInfo.hasPreviousPage}" th:href="@{/admin/studentinfo(pageNum=${studentPageInfo.getPrePage()})}"><li class="page-item active" aria-current="page"><span class="page-link">上一页</span></li></a>
                    <a th:if="${studentPageInfo.hasNextPage}" th:href="@{/admin/studentinfo(pageNum=${studentPageInfo.getNextPage()})}"><li class="page-item active" aria-current="page"><span class="page-link">下一页</span></li></a>
                  </ul>
                </nav>
              </div>
            </div>
            <!---->
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
<!-- JavaScript files-->
<div th:insert="~{common :: commomjs}"></div>
</body>
<script>

  function editstudentinfo(student) {
    $("#modal_id").val(student.id);
    $("#modal_studentid").val(student.studentid);
    $("#modal_username").val(student.username);
    $("#modal_tel").val(student.tel);
    $("#modal_email").val(student.email);
  }
  function delstudentinfo(studentid) {
    var tip = '确定删除这名学生?';
    if(confirm(tip) === true){
      $.ajax({
        url: '/admin/delStudentInfo',
        data: {'studentid':studentid},
        type: 'post',
        success:function () {
          location.reload();
        }
      });
    }
  }

</script>
</html>